﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example04.aspx.cs" Inherits="Chapter38.Example04" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 38-4 使用 watchPosition 方法</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style>
        table {
            border-collapse: collapse;
        }

        th, td {
            padding: 4px;
        }

        th {
            text-align: right;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th>Longitude:</th>
            <td id="logitude">-</td>
            <th>Latitude:</th>
            <td id="latitude">-</td>
        </tr>
        <tr>
            <th>Altitude:</th>
            <td id="altitude">-</td>
            <th>Accuracy:</th>
            <td id="accuracy">-</td>
        </tr>
        <tr>
            <th>Altitude Accuracy:</th>
            <td id="altidudeAccuracy">-</td>
            <th>Heading:</th>
            <td id="heading">-</td>
        </tr>
        <tr>
            <th>Speed:</th>
            <td id="speed">-</td>
            <th>Time Stamp:</th>
            <td id="timeStamp">-</td>
        </tr>
        <tr>
            <th>Error Code:</th>
            <td id="errcode">-</td>
            <th>Error Message:</th>
            <td id="errmessage">-</td>
        </tr>
    </table>
    <button id="pressme">Cancel Watch</button>
    <script>
        var options = {
            enableHightAccuracy: false,
            timeout: 2000,
            maximunAge: 30 * 1000
        };

        var watchId = navigator.geolocation.watchPosition(displayPosition, handleError, options);

        document.getElementById('pressme').onclick = function (e) {
            navigator.geolocation.clearWatch(watchId);
        }

        function displayPosition(e) {
            var properies = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
            for (var i = 0; i < properies.length; i++) {
                var value = e.coords[properies[i]];
                document.getElementById(properies[i]).innerHTML = value;
            }
            document.getElementById('time-stamp').innerHTML = position.timestamp;
        }

        function handleError(e) {
            document.getElementById('errcode').innerHTML = e.code;
            document.getElementById('errmessage').innerHTML = e.message;
        }
    </script>
</body>
</html>
